<!--
 * @Date: 2023-03-12 18:35:12
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-04-06 14:14:54
 * @FilePath: \A19\frontend\src\components\RunCode\CheckExp.vue
-->
<template>
    <div v-if="paper && expInfo" class="none">
        <div id="createTest" class="container">
            <div class="wrapper">
                <div class="left">
                    <div class="header">
                        {{ expInfo.name }}
                        
                    </div>
                    <List :questions="expInfo.questions" :current-question="currentQuestion" :clicked="enter" :judge="iconJudge"></List>

                </div>
                <div class="right">
                    <div class="controllers">
                        <div class="hint">得分：{{ paper.score }}</div>
                        <!-- <ElButton @click="submitExp" type="primary" plain>提交</ElButton> -->
                    </div>
                    <div class="form">
                        <div v-show="currentQuestion" class="ans-panel">
                            <div class="des">
                                <div class="item">
                                <div class="hint">题目描述:</div>
                                    {{ currentQuestion?.description }}
                                </div>
                                <div class="item">
                                    <div class="hint">输入样例:</div>
                                    <div class="code">
                                        {{ currentQuestion?.input }}
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="hint">输出样例:</div>
                                    <div class="code">
                                        {{ currentQuestion?.output }}
                                    </div>
                                </div>
                                <div class="item" v-if="currentAnswer">
                                    <div class="hint">得分:</div>
                                    <ElInputNumber :min="0" :max="currentQuestion?.score" v-model="currentAnswer.getPoint"></ElInputNumber>                                    
                                </div>
                                <div class="foot" style="text-align: left;">
                                    <!-- <ElButton @click="right" plain type="primary">回答正确</ElButton>
                                    <ElButton @click="wrong" plain type="danger">回答错误</ElButton> -->
                                    <ElButton @click="next" plain v-show="currentIndex < expInfo.questions.length - 1">下一题</ElButton>
                                </div>
                            </div>
                            <div class="ans">
                                <RunCode :currentQuestion="currentQuestion" :answer="theAnswer" :language="expInfo.language" :save-code="()=>{}" ></RunCode>
                            </div>
                        </div>
                        <div v-show="!currentQuestion">
                            <div style="height:200px;line-height:200px">
                                选择题目查看
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <Frame>

        </Frame> -->
    </div>
    <div v-else class="none">
        <div class="none-wrapper">
        未参加本次实验
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useClientStore } from '../../pinia/stores/client';
import { experiment } from '@/shared/types/experiments';
import { userExperiments } from '@/shared/types/userExperiments';
import { codeAnswer } from '../../shared/types/userExperiments';
import mitt from '@/mitt';

let loadingInstance:any
const route = useRoute()
const router = useRouter()
const expId = route.params.expId as string
const { currentCourseId,currentUser,client } = storeToRefs(useClientStore())

const expInfo = ref<experiment>()
const paper = ref<userExperiments>()
const answers = computed(() =>{
    return paper.value?.answers
})

const currentIndex = ref(-1)
const currentQuestion = ref<{
    description:string,
    input:string,
    output:string,
    score:number
}>()
const enter = (question:{
    description:string,
    input:string,
    output:string,
    score:number
},index:number) =>{
    currentQuestion.value = question
    if(!answers.value) return
    currentAnswer.value = answers.value[index]
    mitt.emit('clear',answers.value[index].code)
    theAnswer.value.msg = answers.value[index].output
    theAnswer.value.stdin = answers.value[index].input
    currentIndex.value = index
}
const currentAnswer = ref<codeAnswer>()
const theAnswer = ref({
    msg:'',
    text:'',
    stdin:'',
    language:''
})
const next = () =>{
    if(!expInfo.value) return
    enter(expInfo.value.questions[currentIndex.value + 1],currentIndex.value + 1)
}
const iconJudge = (question:{
    description:string,
    input:string,
    output:string,
    score:number
},index:number) =>{
    if(!answers.value) return false
    if(question.score === answers.value[index].getPoint){
        return true
    }
    else{
        return false
    }
}


onMounted(async () =>{
    loadingInstance = ElLoading.service({
        target:'#createTest'
    })
    if(!expId || !currentUser.value._id){
        ElMessage.error('不存在')
        router.back()
        loadingInstance.close()
        return
    }

    const ret = await client.value.callApi('Experiment/GetUserExps',{
      experiment:expId,
      student:currentUser.value._id
    })
    if(ret.isSucc){
      if(ret.res.exp){
        paper.value = ret.res.exp
      }
    }

    const ret2 = await client.value.callApi('Experiment/CourseFromExp',{
        experiment:expId
    })
    if(ret2.isSucc){
        currentCourseId.value = ret2.res.expInfo.course
        expInfo.value = ret2.res.expInfo
        theAnswer.value.language = ret2.res.expInfo.language
    }

    loadingInstance.close()
})
</script>

<style lang="less" scoped>
@fontColor: #a6a6a6;
.none{
    height: 100%;
    width: 100%;
    background-color: #f2f4f7;
    .none-wrapper{
        position: absolute;
        top: 40vh;
        bottom: 0;
        right: 0;
        left: 0;
        height: 100px;
        width: 500px;
        background-color: white;
        border-radius: 20px;
        margin:0 auto;
        color: @fontColor;
        text-align: center;
        line-height: 100px;
    }
}
.hint{
    color: @fontColor;
    font-size: 14px;
}
.item{
    // height: 40px;
    text-align: left;
    color: black;
    line-height: 40px;
    margin: 10px 0;
    .code{
    background: #f6f6f6;
    width: 50%;
    padding: 0 25px;
    border-radius: 10px;
    }
    .input{
    // padding: 0 20px;
    padding-left: 0%;
    width: 60%;
    margin-bottom: 10px;
    }
    .selection{
    // padding-left: 20px;
    height: 40px;
    }
}
.foot{
    padding-top:10px;
}

.container {
    min-width: 992px;
  height: 100%;
  width: 100%;
  background-color: #f2f4f7;
  padding: 5vh 0;
  overflow: auto;
  .wrapper {
    width: 90%;
    height: 90%;
    // background-color: aliceblue;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .left {
      width: 22%;
      height: 100%;
      background-color: white;
      border-radius: 10px;
      position: relative;
      padding-top: 50px;

      .header{
        border-radius: 10px;
        height: 50px;
        color: #a6a6a6;
        font-size: 14px;
        text-align: left;
        line-height: 65px;
        padding: 0 20px;
        user-select: none;
        position: absolute;
        top: 0;
        left: 0;
        background: white;
      }
    }
    .right {
      width: 75%;
      height: 100%;
      // background-color: white;
      & > div {
        border-radius: 10px;
      }
      .controllers {
        height: 12%;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 30px;
        .text {
          color: @fontColor;
        }
        .el-button {
          margin-left: 20px;
        }
      }
      .form {
        position: relative;
        margin-top: 4%;
        // height: 80%;
        width: 100%;
        background-color: white;
        text-align: center;
        // line-height: 500px;
        color: @fontColor;
        padding:30px;
        .ans-panel{
            display: flex;
            .des{
                width: 50%;
                .hint{
                    color: @fontColor;
                    font-size: 14px;
                }
                .item{
                // height: 40px;
                    text-align: left;
                    color: black;
                    line-height: 40px;
                    .code{
                        width: 100%;
                    }
                    //   margin: 10px 0;
                    .input{
                        // padding: 0 20px;
                        padding-left: 0%;
                        width: 100%;
                        margin-bottom: 10px;
                    }
                    .selection{
                        // padding-left: 20px;
                        height: 40px;
                    }
                }

            }
            .ans{
                width: 50%;
                height: 600px;
                
            }
        }
       
        .foot{
          padding-top:10px;
        }
      }
    }
  }
}


</style>
